<template>
  <view>
    <!-- 商品列表渲染 -->
    <view class="goods-list">
      <u-swipe-action>
        <u-swipe-action-item
          v-for="item in cartList"
          :key="item.goods_id"
          @click="swiperItemClick"
          :options="options"
          :name="item.goods_id"
        >
          <view class="cart-item">
            <!-- radio 小程序组件库自带的 -->
            <radio
              @click="changeSelected(item.goods_id)"
              :checked="item.goods_select"
              color="#EB4450"
            />
            <view class="cart-count">
              <u-number-box
                @change="changeCount"
                @overlimit="overLimit(item.goods_id, $event)"
                :value="item.goods_count"
                :name="item.goods_id"
              />
            </view>
            <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
            <navigator
              class="goods-item"
              hover-class="none"
              :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`"
            >
              <!-- 商品图片 -->
              <image
                class="goods-image"
                :src="item.goods_small_logo"
                mode="aspectFit"
              />
              <!-- 商品信息 -->
              <view class="goods-info">
                <view class="goods-name">{{ item.goods_name }}</view>
                <view class="goods-price">{{ item.goods_price }}</view>
              </view>
            </navigator>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <u-empty
      v-if="!cartList.length"
      mode="car"
      icon="http://cdn.uviewui.com/uview/empty/car.png"
    >
      <navigator
        url="/pages/category/index"
        open-type="switchTab"
        hover-class="none"
      >
        <button type="primary" style="margin-top: 40rpx">去逛逛吧~</button>
      </navigator>
    </u-empty>
    <!-- 底部操作栏占位 -->
    <view class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio
            @click="toggleAllSelected"
            class="select-radio"
            :checked="isAllSelected"
            color="#EB4450"
          >
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ selectedCartListPrice }}</text>
        </view>
        <!-- 结算 -->
        <view class="account" @click="gotoPay"
          >去结算({{ selectedCartListCount }})</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapState } from "vuex";
export default {
  //
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
      ],
    };
  },
  computed: {
    ...mapState({
      cartList: (state) => JSON.parse(JSON.stringify(state.cartList)),
    }),
    ...mapGetters([
      "isAllSelected",
      "selectedCartList",
      "selectedCartListCount",
      "selectedCartListPrice",
    ]),
    // cartList() {
    //   return JSON.parse(JSON.stringify(this.$store.state.cartList))
    // }
  },
  onLoad() {
    // this.cartList[0].goods_count = 2;
    // console.log(this.$store.state.cartList);
  },
  methods: {
    // 去结算
    gotoPay() {
      // 判断有没有选中的商品
      if (this.selectedCartListCount) {
        uni.navigateTo({
          url: "/pages/pay/index",
        });
      } else {
        uni.showToast({
          title: "请至少选择一件商品~",
          icon: "none",
        });
      }
    },
    // 全选修改小选
    toggleAllSelected() {
      const cartList = this.cartList;
      const isAllSelected = this.isAllSelected;
      // 更改每一项的选中状态
      cartList.forEach((item) => {
        item.goods_select = !isAllSelected;
      });
      // 更新vuex
      this.$store.commit("updateCartList", cartList);
    },
    deleteGoods(goods_id) {
      const cartList = this.cartList;
      const index = cartList.findIndex((item) => item.goods_id === goods_id);
      console.log(index);
      // console.log(index);
      cartList.splice(index, 1);
      // 更新vuex
      this.$store.commit("updateCartList", cartList);
    },
    swiperItemClick({ name }) {
      this.deleteGoods(name);
    },
    // 超过阈值
    async overLimit(goods_id, type) {
      const [error, res] = await uni.showModal({
        title: "提示",
        content: "确认删除吗？",
      });
      // console.log(res);
      if (!error) {
        // 点击了确定按钮
        if (res.confirm) {
          // 获取购物车中已有数据
          this.deleteGoods(goods_id);
        }
      }
    },
    // 购物车数量改变时触发
    changeCount({ value, name }) {
      // console.log(event.name);
      const cartList = this.cartList;
      const index = cartList.findIndex((item) => item.goods_id === name);
      // console.log(index);
      // 更新对应下标的数据
      cartList[index].goods_count = value;
      // 更新vuex
      this.$store.commit("updateCartList", cartList);
    },
    changeSelected(goods_id) {
      // 获取购物车中原有数据
      const cartList = this.cartList;
      // 获取当前点击的radio的下标
      const index = cartList.findIndex((item) => item.goods_id === goods_id);
      console.log(index);
      // 更新对应下标的数据
      cartList[index].goods_select = !cartList[index].goods_select;
      // 更新vuex
      this.$store.commit("updateCartList", cartList);
    },
  },
};
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: "￥";
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
   bottom: var(--window-bottom);

   
    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>